본문으로 건너뛰기

2.1~2.9Readme

변수, 매개변수, 반환값에 타입을​

  • typing 은 타입을 부여하는 행위를 의미한다.
  • 기본 타입으로는 string, numbere, boolean, undefined, symbol , bigint, object에 포함됩니다.
  • bigint 는 ES2022 Symbol은 ES2015에 동작합니다.

타입추론을 적극적으로 활용하자​

function plus(x:number, y:number) : number{
    return x+y
}
const result = plus(1,2)

  • result에 타입을 부여하지 않았음에도 result는 number를 타입으로 가진다. 이는 타입추론에 의해 number를 가진다.

  • 만일 타입을 지정시 않았을 떄 x 와 y가 암묵적으로 any타입을 가지고 있습니다. 이를 implicitAny에러라고 칭합니다.

  • 타입 추론에 있어 타입을 제대로 추론하면 그대로 쓰고, 틀리게 추론하면 올바르게 쓰게하자

const str = "hello"; // 'hello'로 추론
const num = 123; //123으로 추론
const bool = false; //false로 추론
const n = null; // null로 추론
  • const로 선언했기에 부여한 값말곤 다른 값이 될 수 없기떄문에 올바른 추론이다.
const str3: {} = "hello";
  • 객체를 의미하는 것이 아니라 null과 undefined를 제외한 모든 타입을 의미합니다.
let str = "hello"; // string로 추론
let num = 123; //number으로 추론
let bool = false; //boolean로 추론
let n = null; // null로 추론
let sym = Symbol("sym"); // 심볼로 추론
  • let을 사용하면 const와 다르게 다른 값을 대입하게 가능할 수 있게된다.
  • 이를 다른 값을 넣을 수 있기에 타입 넓히기라고 칭한다.
  • NULL 과 UNDEFINED는 ANY로 추론한다.
  • 타입 스크립트에서 변경할 수 없는 심볼을 unique symbol이라 칭한다.
  • unique symbol 끼리 비교는 불가능하다. 다만 일반 심볼과 unqiue symbol끼리는 비교가 가능하다.
  • @ts-ignore를 이용하면 ts에러를 제거 가능하다.

값 자체가 리터럴인 타입​

const obj = ({ name: "zero" } = { name: "zero" }); // {name : string }
const arr = ([1, 3, "five"] = [1, 3, "five"]); // (string | number)
const func = (amout: nubmer, unit: stirng) =>
  (string = (amount, unit) => amont + unit);
  • 위 요소들은 객체, 배열, 함수인 리터럴 타입이다.
  • (string | number)는 배열의 타입으로 string or number를 넣을 수 있단 뜻이다.
  • 자바스크립트 객체는 const 변수라도 수정할 수 있음으로 타입 스크립트느 수정 가능성을 열어두고 있습니다. 만일 절대 변하지 않는 것이 확실하다면 const를 붙이면 됩니다.
const obj = ({ name: "zero" } = { name: "zero" }) as const; // {name : string }
const arr = ([1, 3, "five"] = [1, 3, "five"]) as const; // (string | number)
  • readonly 속성은 해당 값을 변경 불가능 함을 의미합니다.
  • 이를 이용해 실수로 객체가 변경해서 에러가 발생하던 것을 타입스크립트에선 엄격히 통제할 수 있게 되었습니다.

배열 말고 튜플도 있다.​

  • 배열은 이론상 무한 값들이 들어갈 수 잇는 만큼 일이이 타이핑 하기는 불가능하다.
const arr: stirng[] = ["1", "2"];
const arr2: Array<string> = ["1", "2"];
  • 타입 [] 또는 Array<타입>으로 타이핑하면 된다.
  • 여기서 타입은 요소의 타입을 의미한다.
  • 타입스크립트 배열을 추론할 때 요소들의 타입을 토대로 추론한다.
const array = [123, 4, 56]; // number[]로 추론
array[3].toFixed();
  • 객체가 array[3].toFixed()는 undefined 일수도 있다고 에러가 표시됩니다. 이는 number[]로 추론되면서 array[3]은 number추론 되기 떄문이다. 이를 해결하기 위해선 튜플을 사용할 수 있다.
  • 튜플은 각 요소의 자리에 타입을 고정시킨다.
const tuple: [number, boolean, string] = [1, false, "hi"];
tuple[0] = 3;
  • 표기하지 않은 자리는 undefined타입이 됩니다.
  • 다만 신기하게 push, pop ,shift 매서드를 통해 배열에 요소를 추가하거나 제거하는 것을 막지 않는다. 이를 막기 위해선 readonly 수식어를 붙여주면 수정을 막을 수 있다.
  • 튜플은 길이가 고정이 아닌 각 요소 자리에 타입이 고정되어있음을 의미한다.
const strNumBools: [string, number, ...boolean[]] = [
  "hi",
  123,
  false,
  true,
  false,
];
  • 그것은 ...타입[]표기를 통해 특정 타입이 연달아 나올 수 있음을 알 수 있기 떄문이다.
  • 또한 ? 옵셔널 표기를 통해 있을수도 없을수도 있음을 지정할 수 있다.

타입으로 쓸 수 있는 것을 구분하자​

  • 값 : 일반적으로 자바스크립트에서 사용하는 값을 의미함.
  • 타입 : 구문에서 사용하는 타입을 의미한다.
  • 대부분의 리터럴 값은 타입으로 사용 가능하다 다만 변수의 이름은 타입으로 사용할 수 없다.
  • 다만 Date 나 Math Error등과 같은은 내장 객체는 타이브로 사용할 수 있다.
function add(x: Number, y: Number) {
  return x + y;
}

const str1: String = "hello";
const str2: string = str1; // String은 string에 넣을 수 없다.

const obj: Object = "what"; //의도는 객체를 타입으로 넣기인데 잘못됨
  • 이런 에러를 방지하기 위해 string, boolean 등으로 통일하는 것을 추천한다.
function add(x: number, y: number) {
  return x + y;
}

const add2: add = (x: nubmer, y: number) => x + y;
// 변수명은 typeof를 붙여야 사용할 수 있다.

유니온 타입으로 OR 관계를 표현하자​

let strOrnum: string | number = "hello";
strOrNum = 123;
  • strORnum 변수는 string 일 수도 있고 number 일 수도 있다 따라서 hello 와 123 모두 대입할 수 있다.
  • (string | number)[]과 string | number[] 완전히 다르다 후자는 문자열 or 숫자 배열임을 의미한다.
  • 유니언 타입으로 부터 정확한 타입을 찾아내는 기법을 타입 좁히기라고 칭한다

타입스크립트에 있는 타입을 배우자​

any​

  • any타입을 쓰면 타입스크립트가 타입을 검사하지 못하므로 타입스크립트를 쓰는 의미가 퇴색된다.
  • 게다가 any 타입을 통해 파생되는 결과물도 any 타입이 되어버린다.
  • 빈 배열 선언시 any[]로 정의된다.
  • any[] 배열은 신기하게도 값이 추가될떄마다 타입이 변한다, 다만 값이 제거되어도 이전으로 돌아가지 못하는 문제가 있따.

unknown​

  • unknown은 any와 비슷하게 모든 타입을 대입할 수 있지만 이후에는 어떠한 동작도 수행할 수 없다.
  • try-catch 문에서 error가 unknown으로 받아지는데 이걸 as을 이용해 Error타입으로 타입 주장하여 이후에 동작을 실행할 수 있다.
  • <>를 사용하여 타입 주장을 가능케 할 수도 있다.
try {
} catch (e) {
  const error = e as Error;
  console.log(error.message);
}

void​

  • 함수의 반환값이 없는 경우 보통 부여된다.
  • 반환값이 void라고해서 다른 값을 반환하는 것을 막지는 않는다. 다만 반환값은 void가 되어버린다.
  • 사용자가 함수의 반환값을 사용하지 못하도록 제한한다.
  • 반환 값을 사용하지 않는 콜백 함수를 타이핑할떄 사용된다.

Object​

  • {} + null + undefined = unknown이다
const unk: unknown = "hi";

if (unk) {
  unk; // type {}
}
  • 그렇기에 if에서 위처럼 동작함을 알 수 있다.

never​

  • never 타입에는 어떠한 타입도 대입할 수 없다.
  • infinit와 같은 무한 반복문 시 never타입을 반환한다.

타입 별칭 사용​

type x = {
  hello: string;
};

const j: x;

인터페이스로 객체를 타이핑하기​

interface Person {
  name: string;
  age: number;
  married: boolean;
}
  • 위 처럼 interface 속성은 콤마나 세미콜론, 줄바꿈으로 구분할 수 있음을 알 수있다.
  • 다만 한줄로 입력시 ,로 만 써야한다.
  • interface로 배열과 함수도 타이핑이 가능하다.
interface func {
  (x : nubmer y:number) : number
}

const add : func = (x,y) => x+y

interface Arr {
  length : number;
  [key : number] : string

  const arr : Arr = ['3','5','7']
}
  • 인덱스 속성 키 자리에 [key : number]라는 문법이 존재하는데 이는 이 객체의 lenght를 제외한 속성의 키가 전부 number라는 의미이다.

인터페이스 선언 병합​

  • 타입 별칭과는 다른 인터페이스의 주요한 특징이 있다. 바로 인터페이스 끼리는 서로 합쳐진다는 것이다.
interface Merge {
  one : string
}

interface Merge{
  two : number
}

const example : Merge = {
  one : "1",
  two : "2"
}
  • 같은 이름을 이용해 여러 인터페이스를 선언할 수 있으며 이는 하나로 합쳐짐을 알 수 있다.
  • 이는 객체 수정이 자유로운 자바스크립트의 특징때문에 생겨났다.
  • 다만 새로 생성된 인터페이스 타입의 속성의 타입이 다를경우 에러가 발생한다.

네임스페이스​

  • 인터페이스에는 단점이 존재하는데 바로 남이 만든 인터페이스와 의도치 않게 병합될 수 있단점이다.
  • 이럴 때를 대비해 네임스페이스가 존재한다.
namespace Example {
  interface Inner{
    test : string
  }
  type tesr2 : = number
}

const ex1 : Example.Intter {
  test : hello
}

const ex2 : Example.test2 = 123
  • namespace를 중첩이 가능하다. 다만 이 경운 export를 해야한다.
  • namespace값 자체를 값으로 사용이 가능하다.
  • 내부 값은 [] 값으로 접근 가능하지만 내부 타입은 불가능하다.
namespace test {
  x : number
}

cosnt arr : test[x] = 123